<style lang="scss" scoped>
    .slide-box{
        // width:1060px;
        height:410px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        >.slide{
            transition: .3s;
            position: absolute;
            top: 0;
            white-space: nowrap;
            width: auto;
        }
        .slide-item{
            display: inline-flex;
            flex-direction: column;
            padding: 20px;
            background-color: #fff;
            width: 410px;
            height: 410px;
            margin-right:10px;
            font-size: 18px;
            &:last-of-type{
                margin-right: 0;
            }
        }
        
    }
    .slide-prev,.slide-next{
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        z-index: 1;
        background-color: rgba(black,.2);
        color:#fff;
        border-radius: 50%;
        opacity: .5;
        transition: .3s;
        cursor: pointer;

        $btnMargin:-50px;
        &.slide-prev{
            left:$btnMargin;
        }
        &.slide-next{
            right:$btnMargin;
        }
        &:hover{
            opacity: 1;
        }
    }
    .abs-center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
        z-index: 1;
    }
</style>
<template>
    <section class="relative">
        <div v-if="slideLeft!=0" class="slide-prev" @click="sildeToggle()">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div v-else class="slide-next" @click="sildeToggle()">
            <i class="el-icon-arrow-right"></i>
        </div>
        <div class="slide-box" ref="slide-box">
            <div class="slide" :style="{left:slideLeft+'px'}" ref="slide">
                <!-- item -->
                <div v-for="g in group" class="slide-item ui-border">
                    <div class="flex row-between col-center">
                        <span class="f21">{{g.title}}</span>
                        <router-link to="/cepin-list" class="f-color-blue f16">更多 ></router-link>
                    </div>
                    <hr>
                    <router-link tag="div" v-for="(item,i) in g.data" :key="item.name" :to="{name:'测评详情',query:{id:item.company_id}}" class="flex col-center mb20">
                        <div class="flex col-center relative">
                            <icon name="certificate" scale="2.8" :style="{color:indexColor[i] || '#ddd'}"></icon>
                            <span class="abs-center f-color-white" >{{i+1}}</span>
                        </div>
                        <ui-img :url="item.logo" class="ui-border mr20 ml20" size="40px"></ui-img>
                        <span class="f18">{{item.name}}</span>
                        <div class="flex-1 flex row-end f-color-orange f21">{{item.score}}</div>
                    </router-link>
                    <ui-empty :data="g.data" ></ui-empty>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    export default {
        data(){
            return {
                slideLeft:0,
                group:[
                    { title:'综合实力', data:[]},
                    { title:'最棒产品', data:[]},
                    { title:'最牛运营', data:[]},
                    { title:'最强硬件', data:[]},
                    { title:'最佳客服', data:[]},
                ],
                indexColor:['#cc8bf7','#20a0ff','#3db96d'],
            }
        },
        methods:{
            sildeToggle(){
                if (this.slideLeft!=0) {
                    this.slideLeft = 0
                }else{
                    let left = Math.abs(this.$refs['slide-box'].offsetWidth - this.$refs['slide'].offsetWidth)
                    this.slideLeft = left *-1
                }
            },
        },
        mounted(){
            // 产品、运营、硬件、客服
            this.$http.get('index.php?g=home&m=paperRecord&a=company_list&paper_id=13', {
                params:{
                    node_type:1,
                    page_size:5,
                }
            })
            .then(({data})=>{
                // console.log('产品、运营、硬件、客服',data);
                if (data.code===1) {
                    this.group.forEach((item,i)=>{
                        if (item.title!='综合实力') {
                            this.$set(item, 'data', data.data[i-1])
                        }
                    })
                }
            })

            // 综合实力
            this.$http.get('index.php?g=home&m=paperRecord&a=company_list&paper_id=13',{
                params:{
                    node_type:0,
                    page_size:5,
                }
            })
            .then(({data})=>{
                // console.log('综合实力',data)
                if (data.code===1) {
                    this.$set(this.group[0], 'data', data.data)
                }
            })
        },
    }
</script>